<template>
  <div ref="el" :style="style" style="position: fixed">
    123
    <canvas id="canvas" width="600" height="400">123</canvas>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue"
import { useDraggable } from "@vueuse/core"

const el = ref(null)
onMounted(() => {})
const init = () => {
  const canvas = document.getElementById("canvas")
  const ctx = canvas.getContext("2d")

  // Shadow
  ctx.shadowColor = "red"
  ctx.shadowBlur = 15

  // Rectangle
  ctx.fillStyle = "blue"
  ctx.fillRect(20, 20, 150, 100)
}
// `style` will be a helper computed for `left: ?px; top: ?px;`
const { x, y, style } = useDraggable(el, {
  initialValue: { x: 40, y: 40 }
})
</script>
